<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
import * as THREE from "three";
export default {
  data() {
    return {
      camera: null, //相机对象
      scene: null, //场景对象
      renderer: null, //渲染器对象
      mesh: null //网格模型对象Mesh
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        100
      );

      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      let container = document.getElementById("container");
      container.append(renderer.domElement);

      const geometry = new THREE.BoxGeometry(1, 1, 1);
      const points = [];
      points.push(new THREE.Vector3(-10, 0, 0));
      points.push(new THREE.Vector3(0, 10, 0));
      points.push(new THREE.Vector3(10, 0, 0));
      // const geometry = new THREE.BufferGeometry().setFromPoints(points);
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      const line = new THREE.Line( geometry, material );
      // scene.add( line );

      scene.add(cube);

      camera.position.z = 5;

      function animate() {
        requestAnimationFrame(animate);

        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
      }

      animate();
    }
  }
};
</script>

<style scoped>
#container {
  height: 400px;
}
</style>